<!--
 * @description: 
 * @Date: 2022-10-16 18:15:30
 * @LastEditTime: 2022-10-25 23:43:35
-->
<template>
  <div class="control-menu-item select-none">
    <img :src="img" alt="" class="mxs:w-7 mxs:h-7 w-6 h-6">
    <span class="mxs:hidden">{{name}}</span>
  </div>
</template>
<script setup>
import { defineProps, ref } from 'vue';
const props = defineProps({
  data: { type: Object }
});
const name = ref(props.data.name)
const img = props.data.icon
</script>
<style lang="less">
.control-menu-item {
  display: flex;
  align-items: center;
  margin: 5px 15px;
  padding: 10px;
  border-radius: 6px;

  &:hover {
    background-color: #F3F4F6;
  }

  >img {
    padding: 4px;
    background-color: rgb(230, 230, 230);
    border-radius: 6px;
    display: block;
  }

  >span {
    margin-left: 6px;
    font-size: 12px;
  }
}

</style>
